<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <div class="welcome-header">
            <h1>欢迎进入医院门诊管理系统</h1>
            <p>欢迎使用医院门诊管理系统，以下是系统的一些基本信息和快速导航。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>系统简介</span>
          </div>
          <div class="text item">
            医院门诊管理系统是一个全面的解决方案，旨在帮助医院高效管理门诊预约、医生排班、患者信息等。
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>快速导航</span>
          </div>
          <div class="text item">
            <div v-if="role === 'patient'">
              <el-button type="primary" plain @click="navigateTo('reserve')">门诊预约</el-button>
            </div>
            <div v-else-if="role === 'doctor'">
              <el-button type="primary" plain @click="navigateTo('doctorWorkstation')">病历编辑</el-button>
            </div>
            <div v-else-if="role === 'medicine'">
              <el-button type="primary" plain @click="navigateTo('excel')">药品展示</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>系统通知</span>
          </div>
          <div class="text item">
            <el-alert
              title="系统维护通知"
              type="info"
              description="系统将于每周日晚上10点至凌晨2点进行维护，请提前做好相关准备。"
              show-icon
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import role from 'mock/role';

export default {
  name: 'Dashboard',
  computed: {
    role() {
      return localStorage.getItem('roleSelected')
    }
  },
  methods: {
    navigateTo(routeName) {
      this.$router.push({ name: routeName })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-header {
  text-align: center;
}

.box-card {
  height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.button-group {
  text-align: center;
}

.button-group .el-button {
  margin: 0 10px;
}
</style>
